"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Menu, User, LogOut } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/lib/auth-context";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { useMenu } from "@/contexts/MenuContext";
import { useState } from "react";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";

export function SiteHeader() {
  const { user, logout } = useAuth();
  const pathname = usePathname();
  const router = useRouter();
  const { menus: menus } = useMenu();
  const [isOpen, setIsOpen] = useState(false);

  return (
    <header className="sticky top-0 z-50 w-full border-b border-border bg-card">
      <div className="flex h-16 items-center px-4 gap-4">
        {/* 移动端抽屉菜单按钮 */}
        <Sheet open={isOpen} onOpenChange={setIsOpen}>
          <SheetTrigger asChild>
            <Button variant="ghost" size="icon" className="md:hidden" aria-label="打开导航菜单">
              <Menu className="h-5 w-5" />
            </Button>
          </SheetTrigger>
          <SheetContent side="left" className="w-72">
            <SheetHeader>
              <SheetTitle>导航菜单</SheetTitle>
            </SheetHeader>
            <nav className="mt-4 flex flex-col gap-2">
              {menus.map(menu => (
                <Link
                  key={menu.id}
                  href={menu.path}
                  onClick={() => setIsOpen(false)}
                  className={`flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors ${
                    pathname === menu.path ? "bg-muted text-primary" : "text-foreground hover:bg-muted"
                  }`}
                >
                  {menu.icon && <div dangerouslySetInnerHTML={{ __html: menu.icon }} />}
                  {menu.name}
                </Link>
              ))}
            </nav>
            <div className="mt-4 border-t pt-4">
              {user ? (
                <div className="space-y-2">
                  <Button
                    variant="ghost"
                    className="w-full justify-start"
                    onClick={() => {
                      setIsOpen(false);
                      router.push("/profile");
                    }}
                  >
                    <User className="mr-2 h-4 w-4" />
                    个人中心
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start"
                    onClick={() => {
                      setIsOpen(false);
                      logout();
                    }}
                  >
                    <LogOut className="mr-2 h-4 w-4" />
                    退出登录
                  </Button>
                </div>
              ) : (
                <Button
                  variant="default"
                  className="w-full"
                  onClick={() => {
                    setIsOpen(false);
                    router.push("/login");
                  }}
                >
                  登录
                </Button>
              )}
            </div>
          </SheetContent>
        </Sheet>

        {/* Logo */}
        <Link href="/" className="flex items-center gap-2">
          <div className="h-8 w-8 rounded-lg  flex items-center justify-center">
            <img src="/logo.png" alt="logo" className="h-8 w-8 rounded-lg" />
          </div>
          <div className="flex flex-col">
            <span className="font-bold text-base leading-none">凯笙小世界</span>
          </div>
        </Link>

        <div className="flex-1" />

        {/* 桌面端导航 */}
        <nav className="hidden md:flex items-center gap-6 text-sm">
          {menus.map(menu => (
            <Link
              key={menu.id}
              href={menu.path}
              className={`flex items-center gap-2 transition-colors ${
                pathname === menu.path ? "text-primary font-semibold" : "text-foreground hover:text-primary"
              }`}
            >
              {menu.icon && <div dangerouslySetInnerHTML={{ __html: menu.icon }} />}
              {menu.name}
            </Link>
          ))}
        </nav>

        {/* 右侧用户区 */}
        {user ? (
          <DropdownMenu>
            <DropdownMenuTrigger >
              <Button variant="ghost" size="icon">
                <User className="h-5 w-5" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem disabled>
                <User className="mr-2 h-4 w-4" />
                <span>{user.nickname||user.email}</span>
              </DropdownMenuItem>

              <DropdownMenuItem onClick={() => router.push("/profile")}>
                <User className="mr-2 h-4 w-4" />
                <span>个人中心</span>
              </DropdownMenuItem>
              <DropdownMenuItem onClick={logout}>
                <LogOut className="mr-2 h-4 w-4" />
                <span>退出登录</span>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        ) : (
          <Link href="/login" className="hidden md:block">
            <Button variant="default" size="sm">
              登录
            </Button>
          </Link>
        )}
      </div>
    </header>
  );
}
